<template>
  <div>
    <div id="container"></div>
    <div class="title">
      <img src="../../assets/map-p.png" alt="" />
      <span>附近热门打卡点</span>
    </div>
    <div>
      <dl
        v-for="(item, index) in poilist"
        :key="item.id"
        :class="index % 2 === 0 ? 'pois' : 'pois1'"
      >
        <dt>
          <img :src="item.photos[0].url" alt="" />
        </dt>
        <dd>
          <p class="p1">{{ index + 1 }}.{{ item.name }}</p>
          <p>{{ item.type }}</p>
          <p>联系电话：{{ item.tel }}</p>
          <p>地址：{{ item.address }}</p>
        </dd>
      </dl>
    </div>
    <div class="ml-panel"></div>
  </div>
</template>

<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, ref, nextTick } from "vue";
const map = ref(null);
const poilist = ref([]);
// const handleClick = (index) => {
//   selectedIndex.value = index;
// };
const jd = ref("");
const wd = ref("");
const position = async () => {
  AMap.plugin("AMap.CitySearch", function () {
    var citySearch = new AMap.CitySearch();
    citySearch.getLocalCity(function (status, result) {
      console.log(result, 454);
      let rectangle = result.rectangle.split(";");
      jd.value = rectangle[0].split(",")[0];
      wd.value = rectangle[0].split(",")[1];
    });
  });

  getMap();
};
const getMap = async () => {
  window._AMapSecurityConfig = {
    securityJsCode: "31b5edf6379f1c827a45d9816acf0212",
  };
  AMapLoader.load({
    key: "949d029d982bcde21d69a6824d6d90bf", // 替换为你的Key
    version: "2.0", // 高德地图API版本
    plugins: ["AMap.PlaceSearch", "AMap.CitySearch"], // 需要加载的插件列表
  })
    .then((AMap) => {
      nextTick(() => {
        const map = new AMap.Map("container", {
          pitch: 50,
          viewMode: "3D", // 是否为3D地图模式
          rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
          pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
          zoom: 17, //初始化地图层级
          rotation: -15, //初始地图顺时针旋转的角度
          zooms: [2, 20], //地图显示的缩放级别范围
          center: [115.2708077, 38.7220983],
        });
        map.value = map;
        autoInput();
      });
    })
    .catch((e) => {
      console.log(e);
    });
};
function autoInput() {
  var keywords = "景区";
  AMap.plugin("AMap.PlaceSearch", function () {
    var autoOptions = {
      city: "保定",
      map: map.value,
      autoFitView: true,
      extensions: "all",
    };
    var placeSearch = new AMap.PlaceSearch(autoOptions);
    placeSearch.search(keywords, function (status, result) {
      // 搜索成功时，result即是对应的匹配数据
      console.log(result.poiList.pois);
      poilist.value = result.poiList.pois;
    });
  });
}

onMounted(() => {
  position();
});
</script>

<style scoped>
#container {
  width: 100%;
  height: 400px;
}
.title {
  margin-top: 10px;
  margin-left: 10px;
}
.title img {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
.title span {
  width: 175px;
  height: 35px;
  line-height: 35px;
  font-size: 25px;
  font-weight: bold;
  vertical-align: middle;
}
.pois,
.pois1 {
  margin-left: 10px;
  margin-top: 10px;
  width: 368px;
  /* height: 143px; */
  line-height: 20px;
  border-radius: 15px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
}
.pois {
  background-color: rgba(255, 104, 33, 0.11);
  border: 2px solid rgba(255, 104, 33, 1);
}
.pois1 {
  background-color: rgba(33, 158, 255, 0.11);
  border: 2px solid rgba(33, 158, 255, 1);
}
.pois dt img,
.pois1 dt img {
  width: 130px;
  height: 106px;
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 1);
}
.pois dd,
.pois1 dd {
  margin-left: 10px;
}
.pois dd .p1,
.pois1 dd .p1 {
  color: rgb(16, 16, 16);
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  font-family: PingFangSC-regular;
}
.pois dd p,
.pois1 dd p {
  line-height: 20px;
}
</style>
